<template>
  <div class="container">
    <van-sticky>
      <van-nav-bar v-if="$route.path == '/home'" title="黑马优购" />
      <van-nav-bar v-else left-arrow @click-left="$router.go(-1)" title="黑马优购" />
    </van-sticky>

    <!-- 内容区域用于展示tabbar对应的页面 -->
    <router-view></router-view>
    <!-- 底部的tab区域 -->
    <!-- 引入的是tabbar而不是tabs -->
    <!-- active如果tabbar-item没有name属性 他的值就是索引 -->
    <!-- 如果tabbar-item有name属性 active的值 就是被选中的tabbar-item的name属性值 -->
    <van-tabbar router v-model="active" active-color="#d81e06" inactive-color="#838486">
      <van-tabbar-item name="/home" to="/home" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item name="/cates" to="/cates" icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item name="/search" to="/search" icon="search">搜索</van-tabbar-item>
      <van-tabbar-item name="/cart" to="/cart" icon="cart-o">购物车</van-tabbar-item>
      <van-tabbar-item name="/my" to="/my" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  // 在组件中 data要写成函数 返回一个对象的形式
  data() {
    return {
      active: "/home"
    };
  },
  created() {
    // console.log(this.$route)
    this.active = this.$route.path;
  },
  // watch 侦听器 用于监听数据变化
  watch: {
    "$route.path": function(newvalue) {
      this.active = this.$route.path;
    }
  }
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: red;
  /deep/ .van-nav-bar__title {
    color: #fff;
  }
}
</style>